import {useSelector,useDispatch} from 'react-redux'
import {RootState} from "../../redux/store/store";
import {Button,Divider} from 'antd'
import {deleteBuycar} from "../../redux/BuyCar/slice";
import {checkout} from "../../redux/BuyCar/slice";
import {useHistory} from 'react-router-dom'
import {useEffect} from 'react'
import './paymentcart.css'
import {CheckCircleOutlined,DeleteOutlined} from '@ant-design/icons'
interface propsType{
    originalPrice:number|string,
    Price:number|string
}
export const PaymentCart:React.FC<propsType>=(props)=>{
    const orderid=useSelector((state:RootState)=>state.buycar.orderid);
    useEffect(()=>{
        if(orderid){
            history.push('/pagepayment');
        }
    },orderid)
    const history=useHistory();
    const buycarlist=useSelector((state:RootState)=>state.buycar.buycarproducts)
    const usertoken=useSelector((state:RootState)=>state.userlogin.token)
    const dispatch=useDispatch()
    const clearall=()=>{
        dispatch(deleteBuycar({token:usertoken as string,productid:buycarlist.map((item)=>{
            return item.id
        })}))
    }
    const pay=()=>{
        if(buycarlist.length===0){
            return ;
        }
        dispatch(checkout(usertoken as string));
    }
    return(
        <div className="paymentcart">
            <h1 className="sum">总计</h1>
            <div className="beforePrice">
                原价
                <span className="beforeinfo">{props.originalPrice}</span>
            </div>
            <div className="afterPrice">
                现价
                <span className="afterinfo">{props.Price}</span>
            </div>
            <Divider></Divider>
            <div className="btn">
                <Button onClick={pay} className="pay" type="primary" danger>
                    <CheckCircleOutlined />下单支付
                </Button>
                <Button onClick={clearall}>
                    <DeleteOutlined />清空
                </Button>
            </div>
        </div>
    )
}